<template>
  <div class="register-root">
    <van-nav-bar title="注册" left-arrow @click-left="$router.goBack()" />

    <van-form @submit="onSubmit">
      <div class="input-box">
        <div class="title">用户名</div>

        <div class="input flex">
          <van-field
					  name="username"
            v-model="username"
            :error="false"
            placeholder="请输入6-12位字母加数字"
            :rules="[
              { required: true, message: '请填写用户名', trigger: 'onBlur' },
              {
                pattern: pattern1,
                message: '请输入6-12位字母加数字',
                trigger: 'onBlur',
              },
            ]"
          />
        </div>
      </div>

      <div class="input-box">
        <div class="title">昵称</div>
        <div class="input flex">
          <van-field
					  name="nickname"
            v-model="nickname"
            :error="false"
            placeholder="请输入昵称"
            :rules="[
              { required: true, message: '请输入昵称', trigger: 'onBlur' },
            ]"
          />
        </div>
      </div>

      <div class="input-box">
        <div class="title">邀请码</div>
        <div class="input flex">
          <van-field 
					 name="code"
					 v-model="code" 
					 :error="false"
					 placeholder="请输入邀请码" 
					 :rules="[
					  { required: true, message: '请输入邀请码', trigger: 'onBlur' },
					 ]"
					/>
        </div>
      </div>

      <div class="input-box">
        <div class="title">登录密码</div>

        <div class="input flex">
          <van-field
						name="password"
            v-model="password"
            type="password"
            :error="false"
            placeholder="8-12位大小写字母+数字组合"
            :rules="[
              {
                required: true,
                message: '请输入登录密码',
                trigger: 'onBlur',
              },
              {
                pattern: pattern2,
                message: '请输入6-12位字母加数字',
                trigger: 'onBlur',
              },
            ]"
          />
        </div>
      </div>

      <div class="input-box">
        <div class="title">确认密码</div>
        <div class="input flex">
          <van-field
					  name ="confirm_password"
            v-model="confirm_password"
            type="password"
            :error="false"
            placeholder="请再次输入登录密码"
            :rules="[
              {
                required: true,
                message: '请再次输入登录密码',
                trigger: 'onBlur',
              },
              {
                pattern: pattern2,
                message: '请输入6-12位字母加数字',
                trigger: 'onBlur',
              },
            ]"
          />
        </div>
      </div>
    
    <div class="agreement-box flex">
      <img
        v-if="select"
        src="@/assets/images/register/1.png"
        @click="select = false"
      />
      <img
        v-if="!select"
        src="@/assets/images/register/2.png"
        @click="select = true"
      />
      <div class="text">我已阅读并同意</div>
      <div class="agreement">《用户协议》</div>
    </div>

    <div class="btn"><van-button round block type="info" native-type="submit">立即注册</van-button></div>
    
    <div class="login" @click="$router.push('login')" native-type="submit">已有账号，去登录</div>
		</van-form>
  </div>
</template>

<script>
import mixin from '@/mixin.js';
import { USER_REGISTER } from '@/api/api.js';
import { Toast } from 'vant';
export default {
	name:'register',
	mixins: [mixin],
  data() {
    return {
      active: 0,
      code: '',
			username: '',
			nickname: '',
			password: '',
			confirm_password: '',
      select: false,
      pattern1: /^(?!([a-zA-Z]+|\d+)$)[a-zA-Z\d]{6,12}$/,
      pattern2: /(?=.*[a-zA-Z])(?=.*[0-9])[a-zA-Z0-9]{8,12}/,
    };
  },
	mounted(){
		//this.$router.push({ name: 'login',params: { username: '13477055993'}});
		//this.$router.push({ name: 'login'});
	},
	methods:{
		onSubmit(values) {
			// console.log(this.show);
			console.log('submit', values);
			if(!this.show) {
				Toast.fail('请勾选用户协议');
				return;
			} 
			if(values.password!=values.confirm_password){
				Toast.fail('密码不一致');
				return;
			}
			this.register(values);
		},
		async register(values) {
			const { data } = await this.$reqPost(USER_REGISTER, values);
			Toast(data.info);
			if(data.status==1){
				this.$router.push({ name: 'login',params: { username: values.username}});
			}

		}
	},
  watch: {
    select(n) {
      if(n){
				this.show = true
			}
    },
  },
};
</script>

<style lang="scss" scoped>
.register-root {
  height: 100vh;
  background-color: #fff;
  font-size: 0.26rem;
  .select-box {
    width: 3rem;
    height: 0.6rem;
    color: #fff;
    border: 0.02rem solid #2d7afe;
    margin: 0.3rem auto;
    .select {
      flex: 1;
      height: 100%;
      line-height: 0.6rem;
      text-align: center;
      background-color: #2d7afe;
    }

    .selected {
      flex: 1;
      height: 100%;
      line-height: 0.6rem;
      text-align: center;
      background-color: #fff;
      color: #2d7afe;
    }
  }

  .input-box {
    padding: 0.3rem;
    border-bottom: 0.01rem solid #f5f5f5;

    .title {
      text-align: left;
      margin-bottom: 0.2rem;
    }

    .country {
      text-align: left;
      min-width: 1.2rem;
    }

    .text {
      color: #2d7afe;
      min-width: 1.5rem;
    }
  }

  .btn {
    width: 5rem;
    height: 0.88rem;
    background-color: #2d7afe;
    font-size: 0.26rem;
    line-height: 0.88rem;
    color: #fff;
    border-radius: 0.1rem;
    margin: 0.3rem auto;
  }

  .agreement-box {
    padding-left: 0.3rem;
    margin-top: 0.4rem;
    margin-bottom: 0.7rem;
    img {
      width: 0.28rem;
      height: 0.28rem;
    }
    .text {
      margin: 0 0.1rem 0 0.2rem;
    }
    .agreement {
      color: #0678ff;
    }
  }
}
</style>
